<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8">
<title>Partiest</title>
<link href="jquery-mobile/jquery.mobile-1.1.1.min.css" rel="stylesheet" type="text/css"/>
<link href="css/styles.css" rel="stylesheet" type="text/css"/>
<link href="css/simpledialog.css" rel="stylesheet" type="text/css"/>

<!-- cordova facebook plugin -->
<script src="js/cdv-plugin-fb-connect.js"></script>
<!-- facebook js sdk -->
<script src="js/facebook_js_sdk.js"></script>
        

<script src="jquery-mobile/jquery.js" type="text/javascript"></script>
<script src="js/functions.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.1.1.min.js" type="text/javascript"></script>
<script src="js/simpledialog.js" type="text/javascript"></script>
<script src="js/cordova-1.9.0.js" type="text/javascript"></script>
<script src="js/shoppinglist.js" type="text/javascript"></script>
<script src="js/user_functions.js" type="text/javascript"></script>

<!-- <script src="js/fastclick.js" type="text/javascript"></script> -->
<script src="js/loadingIndicator.js" type="text/javascript"></script>
<script src="js/phonegap-toast.js" type="text/javascript"></script>


<meta name="viewport" content="width=device-width, initial-scale=1"> 

</head> 
<body onload="initFastButtons();"> 
<!-- login/ connect to facebook -->
<div data-role="page" id="login">
	<div data-role="header" data-position="fixed" data-theme="b">
    	<h1>Partiest</h1>
    </div>
    <div data-role="content">
    <div id="message" align="center">
    </div>
    	<form id="loginForm" data-ajax="false" method="post" autocomplete="off">
        <label for="email">Email: </label>
        <input type="email" id="email" name="email" placeholder="Email:" />
        <label for="password">Password: </label>
        <input type="password" id="password" name="password" placeholder="Password:"/>
        <label for="remember">Keep me logged in</label>
        <input type="checkbox" name="remember" id="remember" data-theme="d"/>
        <input type="submit" id="login_button" value="Login" data-theme="b" />
        </form>
        <a href="#register" data-role="button" data-theme="b" data-ajax="false">Create Account</a>
        <a href="#forgot_password" data-role="button" data-theme="b" data-ajax="false">Forgot Password?</a>
        <a href="#main_menu" data-role="button" data-theme="b" data-ajax="false">Debug login</a>
        <a href="javascript:login();" class="login_with_fb" data-ajax="false"></a>
        <div id="profile_picture"></div>
        
    </div>
</div>


<!-- create new user page -->
<div data-role="page" id="register">
	<div data-role="header" data-position="fixed" data-theme="b">
    	<h1>Register</h1>
    </div>
    <div data-role="content">
    <div id="message" align="center">
    </div>
    	<form id="registerForm" data-ajax="false" method="post" autocomplete="off">
        <label for="email">Email: </label>
        <input type="email" id="email" name="email" placeholder="Email:" />
        <label for="password">Password: </label>
        <input type="password" id="password" name="password" placeholder="Password:" />
        
        <label for="confirm">Confirm: </label>
        <input type="password" id="confirm" name="confirm" placeholder="Confirm your password" />
        <fieldset>
            <label for="agree">I agree to the Terms and Conditions</label>
            <input type="checkbox" name="agree" id="agree" data-theme="d"/>
       
        <div align="center">
            <a href="http://seanwuapps.com/Partiest/terms.php">Terms and Conditions</a>
        </div> 
        </fieldset>
        <input type="submit" id="register_button" value="Register" data-theme="b" />
        </form>
        <a href="#login" data-role="button" data-theme="b" data-ajax="false">Back to Login</a>
        
    </div>
</div>

<!-- forgot password page -->
<div data-role="page" id="forgot_password">
	<div data-role="header" data-position="fixed" data-theme="b">
    	<h1>Forgot Password</h1>
    </div>
    <div data-role="content">
    <div id="message" align="center">
    </div>
    	<form id="forgotPasswordForm" data-ajax="false" method="post" autocomplete="off">
        <label for="email">Email: </label>
        <input type="email" id="email" name="email" placeholder="Email:" />
        <input type="submit" id="fpass" value="Reset Password" data-theme="b" />
        </form>
        <a href="#login" data-role="button" data-theme="b" data-ajax="false">Back to Login</a>
        
    </div>
</div>

<!--main menu-->
<div data-role="page" id="main_menu">
	<div data-role="header" data-position="fixed" class="purple-blue-title-bar"  data-backbtn="false">
        <h3>Partiest</h3>
        <div class="ui-btn-right"><a href="#help"><img src="img/about.png" width="32px" height="32px"/></a></div>
  	</div>
    
    <div data-role="content" data-theme="d">
      <div class="ui-grid-b">
        <div class="ui-block-a" style="height:100px">
        	<div class="center-wrapper">
        		<a href="new_event.html" rel="external" data-ajax="false" id="new_event_button"></a>
            </div>
        </div>
        <div class="ui-block-b" style="height:100px">
        	<div class="center-wrapper">
                <a href="#calendar" id="calendar_button"></a>
            </div>
        </div>
        <div class="ui-block-c" style="height:100px">
			<div class="center-wrapper">
                <a href="#shoppinglist" id="shoppinglist_button"></a>
            </div>
        </div>
        <div class="ui-block-a" style="height:100px">
            <div class="center-wrapper">
                <a href="#friends" id="friends_button"></a>
            </div>
        </div>
        <div class="ui-block-b" style="height:100px">
        	<div class="center-wrapper">
        		<a href="#discussions" id="discussions_button"></a>
            </div>
        </div>
        <div class="ui-block-c" style="height:100px">
            <div class="center-wrapper">
                <a href="#profile" id="profile_button"></a>
            </div>
        </div>
        <div class="ui-block-a" style="height:100px">
            <div class="center-wrapper">
                <a href="#albums" id="albums_button"></a>
            </div>

        </div>
        <div class="ui-block-b" style="height:100px">
            <div class="center-wrapper">
                <a href="nearby.html" rel="external" data-ajax="false" id="nearby_button"></a>
            </div>
        </div>
      </div>
    </div>
    <style>
    		#invitations .ui-icon { background:  url(img/nav_invitations.png) 50% 50% no-repeat;  }
			#settings .ui-icon { background:  url(img/nav_settings.png) 50% 50% no-repeat;  }
    </style>
<div data-role="footer" data-position="fixed" data-theme="c" class="custom-nav">
	<div data-role="navbar" data-iconpos="top" class="custom-nav"><!-- footer nav bar -->
		<ul>
			<li><a href="#invitations" id="invitations" data-icon="custom">Invitations</a></li>
			<li><a href="#settings" id="settings" data-icon="custom">Settings</a></li>
		</ul>
	</div><!-- /navbar -->
    
</div>
</div>

<!--help page-->
<div data-role="page" id="help">
  <div data-role="header" class="purple-blue-title-bar" data-backbtn="false">
  	<span class="ui-btn-left"><a class="goback_button" href="#" onClick="goBack();"></a></span>
    <h1>Help</h1>
  </div>
  <div data-role="content" data-theme="d">Help information here....</div>
</div>



<!--calendar page-->
<div data-role="page" id="calendar">
  <div data-role="header" class="purple-blue-title-bar" data-backbtn="false">
  	<span class="ui-btn-left"><a class="goback_button" href="#" onClick="goBack();"></a></span>
    <h1>Calendar</h1>
  </div>
  <div data-role="content">Content</div>
</div>

<!--invitations page-->
<div data-role="page" id="invitations">
  <div data-role="header" class="purple-blue-title-bar" data-backbtn="false">
  	<span class="ui-btn-left"><a class="goback_button" href="#" onClick="goBack();"></a></span>
    <h1>Invitations</h1>
  </div>
  <div data-role="content">Content</div>
</div>

<!--shoppinglist page-->
<div data-role="page" id="shoppinglist">
  <div data-role="header" data-position="fixed" class="purple-blue-title-bar" data-backbtn="false">
  	<span class="ui-btn-left"><a class="goback_button" href="#" onClick="goBack();"></a></span>
    <h1>Shopping List</h1>
    <a href="#" id="add-item-dialog" data-role="button" data-icon="plus" class="ui-btn-right" data-theme="c">Add Item</a>
  </div>
  <div data-role="content">    
    <ul data-role="listview" data-autodividers="true" id="shoppinglist-items"  data-split-icon="delete" data-split-theme="d">
    	
    </ul>
  </div>
  <div data-role="footer">
  <div class="center-wrapper">
  <h3> </h3>
  <div data-role="controlgroup" data-type="horizontal" class="ui-btn-right">
  <a href="#" id="add-item-dialog2" data-role="button" data-icon="plus" data-theme="b">Add Item</a>
  <a href="#" onClick="showEmptyListConfirm();" data-role="button" data-icon="minus" data-theme="b">Empty List</a>
  </div>
  </div>
  </div>
</div>


<!--friends page-->
<div data-role="page" id="friends">
  <div data-role="header" class="purple-blue-title-bar" data-backbtn="false">
  	<span class="ui-btn-left"><a class="goback_button" href="#" onClick="goBack();"></a></span>
    <h1>Friends</h1>
  </div>
  <div data-role="content">Content</div>
</div>

<!--discussions page-->
<div data-role="page" id="discussions">
  <div data-role="header" class="purple-blue-title-bar" data-backbtn="false">
  	<span class="ui-btn-left"><a class="goback_button" href="#" onClick="goBack();"></a></span>
    <h1>Discussions</h1>
  </div>
  <div data-role="content">Content</div>
</div>

<!--profile page-->
<div data-role="page" id="profile">
  <div data-role="header" class="purple-blue-title-bar" data-backbtn="false">
  	<span class="ui-btn-left"><a class="goback_button" href="#" onClick="goBack();"></a></span>
    <h1>My Profile</h1>
  </div>
  <div data-role="content">Content</div>
</div>

<!--albums page-->
<div data-role="page" id="albums">
  <div data-role="header" class="purple-blue-title-bar" data-backbtn="false">
  	<span class="ui-btn-left"><a class="goback_button" href="#" onClick="goBack();"></a></span>
    <h1>Albums</h1>
  </div>
  <div data-role="content">Content</div>
</div>



<!--playlists page-->
<div data-role="page" id="playlists">
  <div data-role="header" class="purple-blue-title-bar" data-backbtn="false">
  	<span class="ui-btn-left"><a class="goback_button" href="#" onClick="goBack();"></a></span>
    <h1>Playlists</h1>
  </div>
  <div data-role="content">Content</div>
</div>

<!--settings page-->
<div data-role="page" id="settings">
  <div data-role="header" class="purple-blue-title-bar" data-backbtn="false">
  	<span class="ui-btn-left"><a class="goback_button" href="#" onClick="goBack();"></a></span>
    <h1>Settings</h1>
  </div>
  <div data-role="content">Content</div>
</div>
</body>
</html>
